<template>
	<view class="examination">
		<view class="examination-header">
			<view class="header-1">
				<image src="../../static/index/back.png" @click="toGoBack()"></image>
			</view>
			<view class="header-2">{{ examInfo.fullName }}</view>
			<view class="header-3" @click="gosuccess">
				<image src="../../static/index/more.png"></image>
			</view>
		</view>
		<view class="examination-title">
			考试倒计时：{{ countdownTime }}
		</view>

		<!-- 判断题 -->
		<view class="examination-content" v-if="currentQuestion.questionType == 'determine'">
			<view class="examination-content-t">
				<view class="examination-content-t-h">
					<view>判断题</view>
					<view>{{ currentIndex + 1 }}/{{ listData.length }}</view>
				</view>
				<view class="examination-content-t-t">{{ currentQuestion.title }}</view>
				<view class="examination-content-t-t"
					v-if="currentQuestion.titleImgs && JSON.parse(currentQuestion.titleImgs).length > 0">
					<image v-for="(item, index) in JSON.parse(currentQuestion.titleImgs)" :key="index" :src="fileImage + item"
						style="width: 100%;">
					</image>
				</view>
				<view class="examination-content-t-c">
					<view :class="['edit-content-right-item-2', currentQuestion.answer === i ? 'active' : '']"
						v-for="(option, i) in ['√', '×']" :key="i" @click="selectOption(currentQuestion, i)">
						{{ option }}
					</view>
				</view>
			</view>
		</view>

		<!-- 填空题 -->
		<view class="examination-content1" v-if="currentQuestion.questionType == 'blank'">
			<view class="examination-content-t">
				<view class="examination-content-t-h">
					<view>填空题</view>
					<view>{{ currentIndex + 1 }}/{{ listData.length }}</view>
				</view>
				<view class="examination-content-t-t">{{ currentQuestion.title }}</view>
				<view class="examination-content-t-t"
					v-if="currentQuestion.titleImgs && JSON.parse(currentQuestion.titleImgs).length > 0">
					<image v-for="(item, index) in JSON.parse(currentQuestion.titleImgs)" :key="index" :src="fileImage + item"
						style="width: 100%;">
					</image>
				</view>
				<view class="examination-content-t-c1">
					<view :class="['fillList', blankFocus ? 'fillList-focus' : '']">
						<view>填空1</view>
						<u-input type="text" v-model="currentQuestion.answer" name="account" class="uni-input"
							placeholder="请输入内容" :clearable="true" @focus="blankFocus = true;"
							@blur="blankFocus = false;"></u-input>
					</view>
					<!-- <view class="">
						<text>填空2</text>
						<u-input type=" text" v-model="currentQuestion.answer" name="account" class="uni-input" placeholder="请输入内容"
							:clearable="true"></u-input>
					</view> -->
				</view>
			</view>
		</view>

		<!-- 选择题 -->
		<view class="examination-content2" v-if="currentQuestion.questionType == 'multiple'">
			<view class="examination-content-t">
				<view class="examination-content-t-h">
					<view>选择题</view>
					<view>{{ currentIndex + 1 }}/{{ listData.length }}</view>
				</view>
				<view class="examination-content-t-t">{{ currentQuestion.title }}</view>
				<view class="examination-content-t-t"
					v-if="currentQuestion.titleImgs && JSON.parse(currentQuestion.titleImgs).length > 0">
					<image v-for="(item, index) in JSON.parse(currentQuestion.titleImgs)" :key="index" :src="fileImage + item"
						style="width: 100%;">
					</image>
				</view>
				<view class="examination-content-t-c2">
					<view class="edit-content-right-item-2" v-for="(option, i) in currentQuestion.options" :key="i"
						:class="[{ 'active': Array.isArray(currentQuestion.answer) && currentQuestion.answer.includes(i) }]"
						@click="selectOption(currentQuestion, i, 'mul')" style="display: block;">
						<view>
							<text>{{ option.label }}</text>
							<text style="padding-left: 16px;">{{ option.content }}</text>
						</view>	
						<!-- <view style="flex: 1; padding-left: 16px;" v-if="option.img.length > 0"> -->
						<view style="padding-top: 10px;" v-if="option.img && option.img.length > 0">
							<image v-for="(item, index) in option.img" :key="index" :src="fileImage + item" style="width: 100%;" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 问答题 -->
		<view class="examination-content2" v-if="currentQuestion.questionType == 'answers'">
			<view class="examination-content-t">
				<view class="examination-content-t-h">
					<view>问答题</view>
					<view>{{ currentIndex + 1 }}/{{ listData.length }}</view>
				</view>
				<view class="examination-content-t-t">{{ currentQuestion.title }}</view>
				<view class="examination-content-t-t"
					v-if="currentQuestion.titleImgs && JSON.parse(currentQuestion.titleImgs).length > 0">
					<image v-for="(item, index) in JSON.parse(currentQuestion.titleImgs)" :key="index" :src="fileImage + item"
						style="width: 100%;">
					</image>
				</view>
				<view class="examination-content-t-c2">
					<u-input type="textarea" v-model="currentQuestion.answer" name="account" class="uni-input"
						maxlength="1000" :height="300" placeholder="请输入内容" :clearable="true"></u-input>
				</view>
			</view>
		</view>
		<view class="examination-btn">
			<u-button :plain=true color="#2265EE" shape="circle" text="上一题" @click="prevQuestion"></u-button>
			<u-button v-if="(currentIndex + 1) < listData.length" color="#2265EE" type="primary" shape="circle"
				text="下一题" @click="nextQuestion"></u-button>
			<u-button v-else color="#2265EE" type="primary" shape="circle" text="提交" @click="submitExam"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		startExamTask,
		submitExamTask
	} from "@/api/index";
	export default {
		data() {
			return {
				fileImage: this.$globalSetting.fileImage,
				id: null,
				examInfo: {},
				currentIndex: 0,
				countdownTime: '',
				timer: null,
				currentQuestion: {},
				blankFocus: false,
				name: "",
				datalist: [{
						name: '兴修水利',
						isOk: false
					},
					{
						name: '粪便污染水源',
						isOk: false
					},
					{
						name: '改水改厕',
						isOk: true
					},
					{
						name: '对饮用水进行消毒',
						isOk: false
					}
				],
				list: [{
						title: '1、血吸虫防治中心在开展防治工作时，对于流行区域d的水源管理措施不包括（）',
						dataList: [{
								name: '兴修水利',
								isOk: false
							},
							{
								name: '粪便污染水源',
								isOk: false
							},
							{
								name: '改水改厕',
								isOk: true
							},
							{
								name: '对饮用水进行消毒',
								isOk: false
							}
						]
					},
					{
						title: '1、血吸虫防治中心在开展防治工作时，对于流行区域d的水源管理措施不包括（）',
						dataList: [{
								name: '兴修水利',
								isOk: false
							},
							{
								name: '粪便污染水源',
								isOk: false
							},
							{
								name: '改水改厕',
								isOk: true
							},
							{
								name: '对饮用水进行消毒',
								isOk: false
							}
						]
					},
					{
						title: '1、血吸虫防治中心在开展防治工作时，对于流行区域d的水源管理措施不包括（）',
						dataList: [{
								name: '兴修水利',
								isOk: false
							},
							{
								name: '粪便污染水源',
								isOk: false
							},
							{
								name: '改水改厕',
								isOk: true
							},
							{
								name: '对饮用水进行消毒',
								isOk: false
							}
						]
					}
				]

			}
		},
		computed: {
			listData() {
				if (this.examInfo.examTask && this.examInfo.examTask.temsexamtaskresultList && this.examInfo.examTask
					.temsexamtaskresultList.length > 0) {
					return this.examInfo.examTask.temsexamtaskresultList.map(v => {
						return {
							...v,
							options: v.options ? JSON.parse(v.options) : []
						}
					});
				}
				return [];
			}
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					this.currentQuestion = this.listData[newVal] || {};
				},
				immediate: true
			},
			listData: {
				handler(newVal) {
					this.currentQuestion = newVal[this.currentIndex] || {};
				},
				immediate: true
			}
		},
		onLoad(e) {
			this.id = e.id;
			if (!this.id) {
				this.showSuccess("请先选择考试！", 'none');
				// this.$router.go(-1);
				uni.navigateBack({
					delta: 1
				})
			} else {
				this.getExamTaskDetail();
			}
		},
		onHide() {
			// 从前台进入后台时触发
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		onUnload() {
			// 页面卸载，销毁，关闭页面触发
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		methods: {
			toGoBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			gosuccess() {
				uni.navigateTo({
					url: '/pages/examinationInterface/afterSubmission'
				})
			},
			// 设置考试时间为2小时
			startTimer() {
				let minutes = this.examInfo.examLength || 0;
				let seconds = 0;
				this.timer = setInterval(() => {
					if (seconds === 0) {
						minutes--;
						seconds = 59;
					} else {
						seconds--;
					}
					if (minutes === 0 && seconds === 0) {
						clearInterval(this.timer);
						this.showSuccess("考试时间已到！", 'none');
						this.submitExam();
					}
					this.countdownTime =
						`${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
				}, 1000);
			},
			getExamTaskDetail() {
				startExamTask(this.id).then((res) => {
					if (res.code == 200) {
						this.examInfo = res.data;
						this.startTimer();
					} else {
						// this.$message.error(res.msg);
						uni.showToast({
							icon: 'error',
							title: res.msg
						});
					}
				});
			},
			getQuestionTypeName(type) {
				const types = {
					1: '判断题',
					2: '填空题',
					3: '选择题',
					4: '问答题'
				};
				return types[type] || '';
			},
			selectOption(item, choose, type) {
				if (!item) return;
				if (type == 'mul') {
					if (!Array.isArray(item.answer)) {
						this.$set(item, 'answer', []);
					}
					// 切换选择状态
					const index = item.answer.indexOf(choose);
					if (index === -1) {
						item.answer.push(choose);
					} else {
						item.answer.splice(index, 1);
					}
				} else {
					this.$set(item, 'answer', choose);
				}
				// 强制更新当前题目
				this.currentQuestion = {
					...this.currentQuestion
				};
			},
			prevQuestion() {
				if (this.currentIndex > 0) {
					this.currentIndex--;
				} else {
					this.showSuccess("已经是第一题了", 'none');
				}
			},
			nextQuestion() {
				if (this.currentQuestion.answer == null || this.currentQuestion.answer == undefined) {
					this.showSuccess("请先答题", 'none');
					return;
				}
				if (this.currentIndex < this.listData.length - 1) {
					this.currentIndex++;
				} else {
					this.showSuccess("已经是最后一题了", 'none');
				}
			},
			submitExam() {
				uni.showModal({
					title: '确认提交考试？',
					success: (res) => {
						if (res.confirm) {
							// 点击了确定
							// 提交考试的接口调用
							let list = this.examInfo.examTask.temsexamtaskresultList;
							this.listData.forEach(item => {
								item.isAnswers = 1;
								item.myAnswers = item.answer;
								if (item.questionType == 'multiple') {
									item.type = '选择题';
									// 选择题
									let b = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
									let myAnswersResult = item.myAnswers.map(index => b[index]);
									let options = item.options;
									for (let i in options) {
										if (myAnswersResult.indexOf(options[i].label) > -1) {
											options[i].myanswer = true;
										} else {
											options[i].myanswer = false;
										}
									}
									item.myAnswers = JSON.stringify(item.myAnswers);
								} else if (item.questionType == 'determine') {
									// 判断题 1: 对，0：错
									item.type = '判断题';
									let options = item.options;
									for (let i in options) {
										if (item.myAnswers == options[i].content) {
											options[i].myanswer = false;
										} else {
											options[i].myanswer = true;
										}
									}
								} else if (item.questionType == 'blank') {
									// 填空题
									item.type = '填空题';
									item.options.push(item.myAnswers);
									item.myAnswers = item.options;
									item.myAnswers = JSON.stringify(item.myAnswers);
								} else if (item.questionType == 'answers') {
									// 问答题
									item.type = '问答题';
								}
								item.options = JSON.stringify(item.options);
							})

							delete this.examInfo.examTask;
							const data = {
								submitType: 2,
								...this.examInfo,
								examId: this.listData[0].examId,
								temsexamtaskresultList: this.listData
							}
							data.id = list[0].taskId;
							// 提交 
							if (list.length == 0) return;
							let id = this.id;
							submitExamTask(list[0].taskId, data).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '提交成功'
									});
									uni.redirectTo({
										url: `/pages/examinationInterface/examinationView?id=${list[0].taskId}`
									});
								} else {
									uni.showToast({
										icon: 'error',
										title: res.msg
									});
								}
							}).catch(() => {});
						} else if (res.cancel) {
							// 点击了取消
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.examination {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;

		.examination-header {
			width: 100%;
			height: 44px;
			display: flex;
			line-height: 44px;

			.header-1 {
				flex: 2;

				image {
					margin-top: 10px;
					margin-left: 16px;
					width: 28px;
					height: 28px;
				}
			}

			.header-2 {
				flex: 8;
				text-align: center;
			}

			.header-3 {
				flex: 2;
				text-align: center;

				image {
					margin-top: 10px;
					width: 28px;
					height: 28px;
				}
			}
		}
	}

	.examination-title {
		width: 100%;
		height: 60px;
		line-height: 60px;
		text-align: right;
		box-sizing: border-box;
		padding-right: 32px;
		font-size: 14px;
		color: #2265ee;
	}

	.examination-content {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 0 16px;

		.examination-content-t {
			width: 100%;
			height: 100%;
			background-color: #F6F7FB;

			.examination-content-t-t {
				padding: 16px 16px 0;
			}

			.examination-content-t-h {
				padding-top: 24px;
				display: flex;
				justify-content: center;
				align-items: center;

				view:nth-child(1) {
					text-align: left;
					width: 74px;
					height: 32px;
					background-color: #000;
					color: #fff;
					text-align: center;
					line-height: 32px;
					border-radius: 0 100px 100px 0;
				}

				view:nth-child(2) {
					flex: 1;
					font-weight: 500;
					font-size: 12px;
					color: #101112;
					line-height: 18px;
					text-align: right;
					font-style: normal;
					margin-right: 13px;
				}
			}

			.examination-content-t-c {
				width: 100%;
				height: auto;
				box-sizing: border-box;
				padding: 0 16px 16px;
				margin-top: 16px;
				display: flex;

				.edit-content-right-item-2 {
					padding: 8px 30px;
					background-color: #fff;
					margin-right: 10px;
					border-radius: 5px;
				}

				.edit-content-right-item-2.active {
					background-color: #2265EE;
					color: #fff;
				}
			}
		}
	}

	.examination-content1 {
		width: 100%;
		height: calc(100vh - 44px - 60px - 84px);
		box-sizing: border-box;
		padding: 0 16px;
		overflow: auto;

		.examination-content-t {
			width: 100%;
			height: auto;
			background-color: #F6F7FB;
			// border-radius: 8px;

			.examination-content-t-t {
				padding: 16px 16px 0;
			}

			.examination-content-t-h {
				padding-top: 24px;
				display: flex;
				justify-content: center;
				align-items: center;

				view:nth-child(1) {
					text-align: left;
					width: 74px;
					height: 32px;
					background-color: #000;
					color: #fff;
					text-align: center;
					line-height: 32px;
					border-radius: 0 100px 100px 0;
				}

				view:nth-child(2) {
					flex: 1;
					font-weight: 500;
					font-size: 12px;
					color: #101112;
					line-height: 18px;
					text-align: right;
					font-style: normal;
					margin-right: 13px;
				}
			}

			.examination-content-t-c1 {
				width: 100%;
				height: auto;
				box-sizing: border-box;
				padding: 0 16px 16px;
				margin-top: 16px;
				margin-bottom: 80px;

				.fillList {
					display: flex;
					align-items: center;
					background-color: #fff;
					padding: 3px 8px;
					border-radius: 5px;
				}

				.fillList.fillList-focus {
					border: 1px solid #2265ee;
				}

				.c-t {
					image {
						border-radius: 8px;
						width: 100%;
						height: 174px;
					}
				}

				.c-t1 {
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					padding: 16px;

					view:nth-child(1) {
						flex: 2;
					}

					view:nth-child(2) {
						flex: 10;

						image {
							border-radius: 8px;
							width: 100%;
							height: 142px;
						}
					}
				}
			}
		}
	}


	.examination-content2 {
		width: 100%;
		height: calc(100vh - 44px - 60px - 84px);
		box-sizing: border-box;
		padding: 0 16px;
		overflow: auto;

		.examination-content-t {
			width: 100%;
			height: auto;
			background-color: #F6F7FB;

			.examination-content-t-t {
				padding: 16px 16px 0;
			}

			.examination-content-t-h {
				padding-top: 24px;
				display: flex;
				justify-content: center;
				align-items: center;

				view:nth-child(1) {
					text-align: left;
					width: 74px;
					height: 32px;
					background-color: #000;
					color: #fff;
					text-align: center;
					line-height: 32px;
					border-radius: 0 100px 100px 0;
				}

				view:nth-child(2) {
					flex: 1;
					font-weight: 500;
					font-size: 12px;
					color: #101112;
					line-height: 18px;
					text-align: right;
					font-style: normal;
					margin-right: 13px;
				}
			}

			.examination-content-t-c2 {
				width: 100%;
				height: auto;
				box-sizing: border-box;
				background-color: #F6F7FB;
				box-sizing: border-box;
				padding: 16px 16px;

				.edit-content-right-item-2 {
					padding: 8px 16px;
					background-color: #fff;
					margin-bottom: 10px;
					border-radius: 5px;
					display: flex;
					align-items: center;
					border: 1px solid #fff;
				}

				.edit-content-right-item-2.active {
					border-color: #2265EE;
					color: #2265EE;
				}

				.uni-input {
					background-color: #fff;
				}
			}
		}
	}

	.datalist-item {
		display: flex;
		width: 100%;
		height: 44px;
		margin-top: 8px;
		background-color: #fff;
		line-height: 44px;
		border-radius: 8px;
		color: #646566;

		view:nth-child(1) {
			flex: 1;
			margin-left: 16px;
		}

		view:nth-child(2) {
			flex: 10;
		}

		view:nth-child(3) {
			flex: 1;
			margin-right: 16px;

			image {
				width: 17px;
				height: 17px;
			}
		}
	}

	.c-t {
		margin-top: 16px;
	}

	/deep/ .u-input--radius,
	.u-input--square {
		border-radius: 10px;
	}

	.input-custom {
		background-color: #fff !important;

		&:focus {
			.u-border {
				border-color: #2265ee !important;
			}
		}
	}

	/deep/ .u-border {
		border-color: #fff !important;
	}

	/deep/ .u-text__value,
	.u-text__value--tips {
		color: #646566 !important;
	}

	.examination-btn {
		width: 100%;
		// height: 84px;
		background-color: #fff;
		position: absolute;
		bottom: 0;
		display: flex;
		box-shadow: inset 0px 1px 0px 0px #E5E5E5;
		box-sizing: border-box;
		padding: 20px 16px;

		.u-button:nth-child(2) {
			margin-left: 12px;
		}
	}

	.actvie {
		border: 1px solid #2265ee !important;
		border-radius: 4px;
	}

	.actvie1 {
		border: 1px solid #2265EE;
		color: #2265EE;
	}
	
	.examination-content-t {
		border-radius: 8px;
	}
	
	
</style>